<template>
  <el-form :model="ruleForm" ref="ruleForm" label-width="160px" v-loading="loading">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" required>
              <el-input v-model.trim="ruleForm.userName" placeholder="请输入账号" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户名称" required>
              <el-input v-model.trim="ruleForm.mchName" placeholder="请输入商户名称" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户编码" required>
              <el-input v-model.trim="ruleForm.mchNo" placeholder="请输入商户编码" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="纳税人识别号" required>
              <el-input v-model.trim="ruleForm.taxpayerNo" placeholder="请输入纳税人识别号" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人代表" required>
              <el-input v-model.trim="ruleForm.ledgerName" placeholder="请输入法人代表" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" required>
              <el-input v-model.trim="ruleForm.contactPhone" placeholder="请输入手机号码" maxlength="11" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="商户电话" required>
              <el-input v-model.trim="ruleForm.landline" placeholder="请输入商户电话" maxlength="11" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="渠道">
              <el-select filterable multiple clearable v-model="ruleForm.channelList" placeholder="请选择渠道" :value-key="'label'" class="full-width">
                <el-option v-for="item in channelDataList" :key="item.id" :label="item.channelName" :value="item.id" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>资质信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="营业执照" required>
              <app-uploader title="营业执照" :limit="1" :initFiles="ruleForm.image1" :accept="'image/*'" :file-format="fileFormat" @change="handleImagesOption($event, 'image1')"></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="税务登记证" required>
              <app-uploader title="税务登记证" :limit="1" :initFiles="ruleForm.image2" :accept="'image/*'" :file-format="fileFormat" @change="handleImagesOption($event, 'image2')"></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证正面照" required>
              <app-uploader title="法人身份证正面照" :limit="1" :initFiles="ruleForm.image3" :accept="'image/*'" :file-format="fileFormat" @change="handleImagesOption($event, 'image3')"></app-uploader>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证反面照" required>
              <app-uploader title="法人身份证反面照" :limit="1" :initFiles="ruleForm.image4" :accept="'image/*'" :file-format="fileFormat" @change="handleImagesOption($event, 'image4')"></app-uploader>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="box-card margin_top_20">
      <div slot="header" class="clearfix">
        <span>银行开户信息</span>
      </div>
      <div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开户名称" required>
              <el-input v-model.trim="ruleForm.bankcard.bankName" placeholder="请输入开户名称" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行账户" required>
              <el-input v-model.trim="ruleForm.bankcard.bankcardNumber" placeholder="请输入银行账户" maxlength="24" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡类型" required>
              <el-select v-model="ruleForm.bankcard.bankcardType" placeholder="请选择银行卡类型" clearable class="full-width">
                <el-option v-for="item in bankcardDataType" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户地址" required>
              <el-input v-model.trim="ruleForm.bankcard.address" placeholder="请输入开户地址" maxlength="30" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持卡人姓名" required>
              <el-input v-model.trim="ruleForm.bankcard.userName" placeholder="请输入持卡人姓名" maxlength="20" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="持卡人身份证号" required>
              <el-input v-model.trim="ruleForm.bankcard.idNumber" placeholder="请输入持卡人身份证号" maxlength="18" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开户预留电话" required>
              <el-input v-model.trim="ruleForm.bankcard.bankPhone" placeholder="请输入开户预留电话" maxlength="11" show-word-limit></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" class="text-center">
            <el-button type="primary" @click="submitForm()" :loading="loading">确认</el-button>
            <el-button @click="$router.back()">取消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </el-form>
</template>

<script>
import Setting from '@/settings'
import AppUploader from '@/components/AppUploader/index'
import { GetMerchantChannelAll } from '@/views/store-management/services/index'
import { AddMerchant, EditMerchant, GetMerchantDetail } from '@/views/merchant-management/services'

export default {
  components: {
    AppUploader,
  },
  data() {
    return {
      ruleForm: {
        id: null,
        userName: '',
        mchName: '',
        mchType: 2,
        saleMode: 0,
        taxpayerNo: '', //纳税人识别号
        mchNo: '', //商户编码
        ledgerName: '', //法人名称
        contactPhone: '', //联系电话
        landline: '', //商户电话
        channelList: [],
        image1: null, //营业执照图片
        image2: null, //税务登记图片
        image3: null, //法人身份证正面图片
        image4: null, //法人身份证反面图片
        bankcard: {
          id: '',
          targetId: '',
          bankName: '', //开户行名称
          bankcardNumber: '', //银行账号
          bankcardType: '', //银行卡类型 0 借记卡 1 储蓄卡 3 信用卡
          address: '', //开户行地址
          userName: '',
          idNumber: '',
          bankPhone: '', //银行预留手机号
        },
      },
      bankcardDataType: [
        { value: '0', label: '借记卡' },
        { value: '1', label: '储蓄卡' },
        { value: '2', label: '信用卡' },
      ],
      loading: false,
      channelDataList: [],
      fileFormat: ['jpg', 'jpeg', 'png'],
    }
  },
  created() {
    this.getChannelList()
    if (this.$route.query.id) {
      this.manageDetail()
    }
  },
  methods: {
    getChannelList() {
      GetMerchantChannelAll().then(data => {
        this.channelDataList = data.data.map(item => {
          return {
            id: item.id,
            disabled: item.status != 1,
            channelName: item.channelName,
          }
        })
      })
    },
    async manageDetail() {
      //商户详情
      this.loading = true
      GetMerchantDetail({ id: this.$route.query.id })
        .finally(() => (this.loading = false))
        .then(res => {
          if (res && res.code == 200) {
            this.setData(res.data)
          }
        })
    },
    handleImagesOption(value, key) {
      if (value && value.length) {
        this.ruleForm[key] = [value[0].fileUrl]
      } else {
        this.ruleForm[key] = null
      }
    },

    submitForm() {
      if (!this.validForm()) return
      this.loading = true
      if (this.$route.query.id) {
        EditMerchant({
          ...this.formatData(),
          id: this.$route.query.id,
        })
          .finally(() => (this.loading = false))
          .then(data => {
            if (data && data.code == 200) {
              this.$message.success('修改成功!')
              this.$router.back()
            } else {
              this.$message.error(data.msg)
            }
          })
        return
      }
      AddMerchant(this.formatData())
        .finally(() => (this.loading = false))
        .then(data => {
          if (data && data.code == 200) {
            this.$message.success('新增成功!')
            this.$router.back()
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    setData(result) {
      this.ruleForm.id = result.id
      this.ruleForm.userName = result.userName
      this.ruleForm.mchName = result.mchName
      this.ruleForm.mchType = result.mchType
      this.ruleForm.saleMode = result.saleMode
      this.ruleForm.taxpayerNo = result.taxpayerNo //纳税人识别号
      this.ruleForm.mchNo = result.mchNo //商户编码
      this.ruleForm.ledgerName = result.ledgerName //法人名称
      this.ruleForm.contactPhone = result.contactPhone //联系电话
      this.ruleForm.landline = result.landline //商户电话
      this.ruleForm.image1 = result.licenseImg ? [result.licenseImg] : null
      this.ruleForm.image2 = result.taxRegistrationImg ? [result.taxRegistrationImg] : null
      this.ruleForm.image3 = result.idcardFrontImg ? [result.idcardFrontImg] : null
      this.ruleForm.image4 = result.idcardBackImg ? [result.idcardBackImg] : null
      if (result.bankcard) {
        this.ruleForm.bankcard.id = result.bankcard.id
        this.ruleForm.bankcard.targetId = result.bankcard.targetId
        this.ruleForm.bankcard.bankName = result.bankcard.bankName
        this.ruleForm.bankcard.bankcardNumber = result.bankcard.bankcardNumber
        this.ruleForm.bankcard.bankcardNumber = result.bankcard.bankcardNumber
        this.ruleForm.bankcard.bankcardType = result.bankcard.bankcardType.toString()
        this.ruleForm.bankcard.address = result.bankcard.address
        this.ruleForm.bankcard.bankPhone = result.bankcard.bankPhone
        this.ruleForm.bankcard.userName = result.bankcard.userName
        this.ruleForm.bankcard.idNumber = result.bankcard.idNumber
      }
      this.ruleForm.channelList = result.channelList.map(item => item.id)
    },
    formatData() {
      const newData = {
        userName: this.ruleForm.userName, // 账号
        mchName: this.ruleForm.mchName, // 商户名
        mchNo: this.ruleForm.mchNo, // 商户编码
        mchType: this.ruleForm.mchType, // 商户类型 1平台 2加盟
        saleMode: this.ruleForm.saleMode, // 销售类型 0 没有 1 分销 2 采销 3 分+采
        enableStatus: 0, // 启用状态：0启用，1禁用
        taxpayerNo: this.ruleForm.taxpayerNo, // 纳税人识别号
        ledgerName: this.ruleForm.ledgerName, // 法人名称
        contactPhone: this.ruleForm.contactPhone, // 联系电话
        landline: this.ruleForm.landline, // 座机
        // licenseNo: , // 营业执照编码
        licenseImg: this.ruleForm.image1[0], // 营业执照图片
        taxRegistrationImg: this.ruleForm.image2[0], // 税务登记图片
        idcardFrontImg: this.ruleForm.image3[0], // 法人身份证正面图片
        idcardBackImg: this.ruleForm.image4[0], // 法人身份证反面图片
        bankcard: {
          id: this.ruleForm.bankcard.id,
          targetId: this.ruleForm.bankcard.targetId ? this.ruleForm.bankcard.targetId : this.$route.query.id, // 目标id
          // userType: , // 用户类型 0 用户 1 商户 2 店铺
          // bankcardImg: , // 银行LOGO
          bankName: this.ruleForm.bankcard.bankName, // 开户行名称
          bankcardNumber: this.ruleForm.bankcard.bankcardNumber, // 银行账号
          bankcardType: this.ruleForm.bankcard.bankcardType, // 银行卡类型 0 借记卡 1 储蓄卡 3 信用卡
          address: this.ruleForm.bankcard.address, // 开户行地址
          userName: this.ruleForm.bankcard.userName, // 持卡人姓名
          idNumber: this.ruleForm.bankcard.idNumber, // 持卡人身份证号
          bankPhone: this.ruleForm.bankcard.bankPhone, // 银行预留手机号
        },
        channelList: this.ruleForm.channelList.map(item => {id: item}),
        // email: , // 电子邮箱
        // province: , // 省
        // provinceName: , // 省名称
        // city: , // 市
        // cityName: , // 市名称
        // district: , // 区
        // districtName: , // 区名称
        // street: , // 街道
        // streetName: , // 街道名称
        // address: , // 详细地址(除去省市区)
        // longitude: , // 经度
        // latitude: , // 纬度
        // merchant_img: , // 商户实景图片
        // merchant_logo: , // 商户logo
        // proId: , // 不填  默认为微服务
        // userId: , // 所属用户id    指定商户所属人时必填
        creatorId: JSON.parse(this.$store.state.user.userInfo).id, // 创建人
        // creatorName: JSON.parse(this.$store.state.user.userInfo).name, //创建人
      }
      return newData
    },
    validForm() {
      if (!this.ruleForm.userName) {
        this.$message.warning('请输入账号!')
        return false
      }
      if (!Setting.expression[0].value.test(this.ruleForm.userName)) {
        this.$message.warning('账号只能输入字母和数字!')
        return false
      }
      if (!this.ruleForm.mchName) {
        this.$message.warning('请输入商户名称!')
        return false
      }
      if (!this.ruleForm.mchNo) {
        this.$message.warning('请输入商户编码!')
        return false
      }
      if (!Setting.expression[0].value.test(this.ruleForm.mchNo)) {
        this.$message.warning('商户编码只能输入字母和数字!')
        return false
      }
      if (!this.ruleForm.taxpayerNo) {
        this.$message.warning('请输入纳税人识别号!')
        return false
      }
      if (!Setting.expression[0].value.test(this.ruleForm.taxpayerNo)) {
        this.$message.warning('纳税人识别号只能输入字母和数字!')
        return false
      }
      if (!this.ruleForm.ledgerName) {
        this.$message.warning('请输入法人代表!')
        return false
      }
      if (!this.ruleForm.contactPhone) {
        this.$message.warning('请输入手机号码!')
        return false
      }
      if (!Setting.expression[1].value.test(this.ruleForm.contactPhone)) {
        this.$message.warning('手机号码格式不正确!')
        return false
      }
      if (!this.ruleForm.landline) {
        this.$message.warning('请输入商户电话!')
        return false
      }
      if (!Setting.expression[1].value.test(this.ruleForm.landline)) {
        this.$message.warning('商户电话格式不正确!')
        return false
      }
      if (!this.ruleForm.image1 || !this.ruleForm.image1.length) {
        this.$message.warning('请上传营业执照!')
        return false
      }
      if (!this.ruleForm.image2 || !this.ruleForm.image2.length) {
        this.$message.warning('请上传税务登记证!')
        return false
      }
      if (!this.ruleForm.image3 || !this.ruleForm.image3.length) {
        this.$message.warning('请上传法人身份证正面照!')
        return false
      }
      if (!this.ruleForm.image4 || !this.ruleForm.image4.length) {
        this.$message.warning('请上传法人身份证反面照!')
        return false
      }
      if (!this.ruleForm.bankcard.bankName) {
        this.$message.warning('请输入开户名称!')
        return false
      }
      if (!this.ruleForm.bankcard.bankcardNumber) {
        this.$message.warning('请输入银行账户!')
        return false
      }
      if (!Setting.expression[6].value.test(this.ruleForm.bankcard.bankcardNumber)) {
        this.$message.warning('银行账户格式不正确!')
        return false
      }
      if (!this.ruleForm.bankcard.bankcardType) {
        this.$message.warning('请选择银行卡类型!')
        return false
      }
      if (!this.ruleForm.bankcard.address) {
        this.$message.warning('请输入开户地址!')
        return false
      }
      if (!this.ruleForm.bankcard.userName) {
        this.$message.warning('请输入持卡人姓名!')
        return false
      }
      if (!this.ruleForm.bankcard.idNumber) {
        this.$message.warning('请输入持卡人身份证号!')
        return false
      }
      if (!Setting.expression[7].value.test(this.ruleForm.bankcard.idNumber)) {
        this.$message.warning('持卡人身份证号格式不正确!')
        return false
      }
      if (!this.ruleForm.bankcard.bankPhone) {
        this.$message.warning('请输入开户预留电话!')
        return false
      }
      if (!Setting.expression[1].value.test(this.ruleForm.bankcard.bankPhone)) {
        this.$message.warning('手机号码格式不正确!')
        return false
      }
      return true
    },
  },
}
</script>
